<template>
  <div class="data-container">
    <div class="data-title">
      <p>综合数据展示</p>
      <!-- 全屏按钮 -->
      <div class="fullscreen" @click="toggleFullscreen"><i class="el-icon-full-screen"></i></div>
    </div>
    <div class="data-cont">
      <div class="data-item mt43">
        <div class="data-item-container">
          <div class="data-item-cont-title">
            <h2>工厂产量分析</h2>
            <div>
              <el-tag v-for="(item, index) in tagList" :key="index" :type="type(index, 'yield')" effect="plain" @click="val => onTagScreen(index, val, 'yield')">
                {{ item.name }}
              </el-tag>
            </div>
          </div>
          <div class="echarts-item yield">
            <div id="yieldChart" :style="echartStyle"></div>
          </div>
        </div>
        <div class="data-item-container">
          <div class="data-item-cont-title">
            <h2>库存分析</h2>
            <div>
              <el-tag v-for="(item, index) in tagList" :key="index" :type="type(index, 'stock')" effect="plain" @click="val => onTagScreen(index, val, 'stock')">
                {{ item.name }}
              </el-tag>
            </div>
          </div>
          <div class="echarts-item stock">
            <div id="stockChart" :style="echartStyle"></div>
          </div>
        </div>
        <div class="data-item-container">
          <div class="data-item-cont-title">
            <h2>产销分析</h2>
            <div>
              <el-tag v-for="(item, index) in tagList" :key="index" :type="type(index, 'proSale')" effect="plain" @click="val => onTagScreen(index, val, 'proSale')">
                {{ item.name }}
              </el-tag>
            </div>
          </div>
          <p>今日入库数量：<span class="color-num">{{ numData(proSaleInNumber) }}</span>今日出库数量：<span class="color-warn">{{ numData(proSaleOutNumber) }}</span></p>
          <div class="echarts-item">
            <div id="proSaleChart" :style="echartStyle"></div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="data-item data-width">
        <div class="data-item-title">
          <p>扫码次数<span class="color-num">{{ numData(scanCodeNum) }}</span><b>|</b>窜货预警<span class="color-warn">{{ numData(fleeingGoods) }}</span></p>
        </div>
        <div class="echarts-item map">
          <div id="mapChart" :style="echartStyle"></div>
        </div>
      </div>
      <div class="data-item mt43">
        <div class="data-item-top">
          <div class="data-item-num top-left-border">
            <div class="circle right-bottom"></div>
            <p>今日订单<br><b>{{ numData(todaySOrder) }}</b><span>(单)</span></p>
          </div>
          <div class="data-item-num top-right-border">
            <div class="circle left-bottom"></div>
            <p>待发货订单<br><b>{{ numData(toBeDelivered) }}</b><span>(单)</span></p>
          </div>
          <div class="data-item-num bottom-left-border">
            <div class="circle right-top"></div>
            <p>今日客户下单数<br><b>{{ numData(todayOrderCustomer) }}</b><span>(人)</span></p>
          </div>
          <div class="data-item-num bottom-right-border">
            <div class="circle left-top"></div>
            <p>经销商总数<br><b>{{ numData(dealerCount) }}</b><span>(家)</span></p>
          </div>
          <div class="data-item-text">
            业务量
          </div>
        </div>
        <div class="data-item-cont">
          <div class="data-item-cont-title">
            <h2>经销商【订货量】排名TOP10</h2>
            <!-- <el-tag type="success" effect="plain">近一月</el-tag> -->
          </div>
          <div class="data-item-cont-cont">
            <!-- <div class="data-item-cont-cont-tag">
              <el-tag v-for="(item, index) in dealerList" :key="index" :type="type(index)" effect="plain" @click="val => onTagDealer(index, val)">
                {{ item.name }}
              </el-tag>
            </div> -->
            <div class="data-item-cont-cont-title">
              <span>经销商</span>
              <span class="flex">{{ dealerTitleName }}</span>
            </div>
            <div class="data-item-cont-cont-item">
              <div class="dealer-item" v-for="(i, index) in dealerData" :key="index">
                <div class="dealer-item-top">
                  <span>{{ i.province ? i.province : '未知' }}</span>
                  <span class="flex">{{ i.outStore }}</span>
                </div>
                <div class="dealer-item-bottom">
                  <div class="dealer-bgcolor" :style="{ width: (i.outStore / outStore) * 100 + '%' }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import china from 'echarts/map/json/china.json'
import { yieldList, stockList, proSaleList, scanCodeNum, fleeingGoodsList, businessList, dealerList } from "@/api/system/workBench/workBench"
export default {
  name: "Index",
  data() {
    return {
      yieldCurrent: 1,
      yieldYear: new Date().getFullYear(),
      yieldTitleData: [],
      yieldServesData: [],
      stockCurrent: 1,
      stockYear: new Date().getFullYear(), 
      stockServesData: [],
      proSaleCurrent: 1,
      proSaleYear: new Date().getFullYear(),
      proSaleInNumber: '',
      proSaleOutNumber: '',
      proSaleInData: '',
      proSaleOutData: '',
      // 筛选
      tagList:[{
        name: new Date().getFullYear() - 1
      },{
        name: new Date().getFullYear()
      }],
      scanCodeNum: 0, // 扫码次数
      fleeingGoods: 0, // 窜货预警
      mapData: [],
      echartStyle: { width: "100%", height: "100%" },
      // current: 2,
      // 经销商查询调教
      // dealerList: [{
      //   name: '按活跃度'
      // },{
      //   name: '按销量'
      // },{
      //   name: '按库存'
      // }],
      dealerTitleName: '累计库存',
      dealerData:[],
      outStore: '',
      todaySOrder: '', // 今日订单
      toBeDelivered: '', // 待发货订单
      todayOrderCustomer: '', // 今日客户下单数
      dealerCount: '', // 经销商总数
    }
  },
  created() {
    this.getYieldList()
    this.getStockList()
    this.getProSaleList()
    this.getScanCode()
    this.getFleeingGoodsList()
    this.getBusinessList()
    this.getDealerData()
  },
  mounted(){
    this.timer = setInterval(() => {
      this.getYieldList()
      this.getStockList()
      this.getProSaleList()
      this.getScanCode()
      this.getFleeingGoodsList()
      this.getBusinessList()
      this.getDealerData()
    }, 60000)
  },
  methods:{
    // 全屏
    toggleFullscreen() {
      // 获取需要全屏的元素
      const el = document.querySelector('.data-container')
      // 判断是否已经处于全屏模式
      if(!document.fullscreenElement){
        // 进入全屏模式
        el.requestFullscreen().catch(err => {
          console.log(`进入全屏模式失败：${err.message}`)
        })
      }else{
        // 退出全屏模式
        document.exitFullscreen()
      }
    },
    // tag选项
    type(index, type){
      if(type == 'yield'){
        if(index == this.yieldCurrent){
          return 'success'
        }else{
          return 'info'
        }
      }if(type == 'stock'){
        if(index == this.stockCurrent){
          return 'success'
        }else{
          return 'info'
        }
      }if(type == 'proSale'){
        if(index == this.proSaleCurrent){
          return 'success'
        }else{
          return 'info'
        }
      }else{
        if(index == this.current){
          return 'success'
        }else{
          return 'info'
        }
      }
    },
    // echart图筛选
    onTagScreen(index, val, type){
      // 工厂产量
      if(type == 'yield'){
        this.yieldCurrent = index
        this.yieldYear = val.target.innerText
        this.type(index, type)
        this.getYieldList()
      }
      // 库存分析
      else if(type == 'stock'){
        this.stockCurrent = index
        this.stockYear = val.target.innerText
        this.type(index, type)
        this.getStockList()
      }
      // 产销分析
      else if(type == 'proSale'){
        this.proSaleCurrent = index
        this.proSaleYear = val.target.innerText
        this.type(index, type)
        this.getProSaleList()
      }
    },
    // 工厂产量分析数据
    getYieldList(){
      yieldList({year: this.yieldYear}).then(res => {
        let serves = []
        serves.push(
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
          },
          {
            id: 'pie',
            type: 'pie',
            radius: '40%',
            center: ['50%', '25%'],
            hoverAnimation:false,
            label: {
              formatter: '{d}%',
              fontSize: 12,
            },
            labelLine: {
              length: 5,
              length2: 15,
            },
            encode: {
              value: new Date().getMonth(),
              tooltip: new Date().getMonth()
            }
          }
        )
        let a = []
        let b = []
        if(res.data){
          a = Object.keys(res.data)
          b = Object.values(res.data)
        }else{
          a = ['0','1','2','3','4','5','6','7','8','9','10','11','12']
          b = []
        }
        let data = [a,b]
        this.yieldTitleData = data
        this.yieldServesData = serves
        this.getYieldData()
      })
    },
    // 工厂产量分析
    getYieldData(){
      const yieldData = {
        // legend: {
        //   bottom: 0,
        //   itemWidth: 5,
        //   itemHeight: 5,
        //   borderRadius: 5,
        //   textStyle:{
        //     color: '#fff',
        //     fontSize: 10
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize: 10
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        yAxis: {
          gridIndex: 0,
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        grid:{
          top: "55%",
          left: "40px",
          right: "0px",
          bottom: "40px"
        },
        dataset: {
          source: this.yieldTitleData
        },
        color: ['#00d8e4', '#6877fe', '#c279ff'],
        series: this.yieldServesData
      }
      let yieldChart = echarts.init(document.getElementById("yieldChart"))
      yieldChart.setOption(yieldData,true)
      yieldChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value;
          yieldChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{d}%'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          })
        }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        yieldChart.resize()
      })
    },
    // 库存分析数据
    getStockList(){
      stockList({year: this.stockYear}).then(res => {
        let title = []
        let serves = []
        res.data.map(item => {
          title.push(item.NAME)
        })
        for(var i = 0,d = 0; i < title.length, d < res.data.length; i++, d++){
          serves.push({
            name: title[i],
            type: 'line',
            stack: 'Total',
            smooth: true,
            showSymbol: false,
            areaStyle: {},
            lineStyle: {width: 2},
            data: Object.values(res.data[d])
          })
        }
        // console.log(serves)
        this.stockServesData = serves
        this.getStockData()
      })
    },
    // 库存分析
    getStockData(){
      const stockData = {
        color: ['#b37ae8', '#45b8df', '#00ded5'],
        legend: {
          bottom: 0,
          itemWidth: 5,
          itemHeight: 5,
          borderRadius: 5,
          textStyle:{
            color: '#fff',
            fontSize: 10
          },
          // formatter: function(name){
          //   return name.length > 3 ? name.substr(0,3) + "..." : name
          // }
        },
        tooltip: {
          trigger: 'axis',
          textStyle:{
            fontSize: 10
          }
        },
        grid:{
          top: "20px",
          left: "40px",
          right: "0px",
          bottom: "40px"
        },
        xAxis: {
          data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        series: this.stockServesData
      }
      let stockChart = echarts.init(document.getElementById("stockChart"))
      stockChart.setOption(stockData,true)
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        stockChart.resize()
      })
    },
    // 产销分析数据
    getProSaleList(){
      proSaleList({year: this.proSaleYear}).then(res => {
        this.proSaleInNumber = res.data.inNumber
        this.proSaleOutNumber = res.data.outNumber
        if(res.data.inMonthsMap){
          this.proSaleInData = Object.values(res.data.inMonthsMap)
        }else{
          this.proSaleInData = []
        }
        if(res.data.outMonthsMap){
          this.proSaleOutData = Object.values(res.data.outMonthsMap)
        }else{
          this.proSaleOutData = []
        }
        this.getProSaleData()
      })
    },
    // 产销分析
    getProSaleData(){
      const proSaleData = {
        legend: {
          data: ['入库数', '出库数'],
          bottom: 0,
          itemWidth: 5,
          itemHeight: 5,
          borderRadius: 5,
          textStyle:{
            color: '#fff',
            fontSize: 10
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle:{
            fontSize: 10
          }
        },
        grid:{
          top: "10px",
          left: "40px",
          right: "0px",
          bottom: "50px"
        },
        xAxis: {
          data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            fontSize: 10
          }
        },
        series: [
          {
            name: '入库数',
            type: 'bar',
            data: this.proSaleInData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00fbe9' },
                { offset: 0.5, color: '#03bbe2' },
                { offset: 1, color: '#0083d8' }
              ]),
              borderType: 'solid',
              borderRadius: [5, 5, 0, 0]
            },
            barWidth: '4px',
          },
          {
            name: '出库数',
            type: 'bar',
            data: this.proSaleOutData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ee7eff' },
                { offset: 0.5, color: '#a16ef3' },
                { offset: 1, color: '#3e5aea' }
              ]),
              borderRadius: [5, 5, 0, 0]
            },
            barWidth: '4px',
          }
        ]
      }
      let proSaleChart = echarts.init(document.getElementById("proSaleChart"))
      proSaleChart.setOption(proSaleData,true)
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        proSaleChart.resize()
      })
    },
    // 扫码次数
    getScanCode(){
      scanCodeNum().then(res => {
        if(res.data){
          this.scanCodeNum = res.data
        }
      })
    },
    // 窜货预警
    getFleeingGoodsList(){
      fleeingGoodsList().then(res => {
        if(res.data){
          let num = 0
          res.data.forEach(i => {
            num += i.count
            return num
          })
          this.fleeingGoods = num
          this.mapData = res.data
        }
        this.getMapData()
      })
    },
    // 数字位数格式
    numData(num){
      return num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    },
    // 地图数据格式化
    convertData(data) {
      var chinaData = china
      // console.log(chinaData)
      var geoCoordMap = {}
      chinaData.features.forEach(item => {
        return geoCoordMap[item.properties.name] = item.properties.cp
      })
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].scan_address]
        if (geoCoord) {
          res.push({
            name: data[i].scan_address,
            value: geoCoord.concat(data[i].count)
          })
        }
      }
      return res
    },
    // 地图数据
    getMapData(){
      // let data = [
      //   {name: '陕西', value: 200},
      //   {name: '上海', value: 12},
      // ]
      const mapData = {
        geo: {
          show: true,
          map: 'china',
          label: {
            show: false
          },
          roam: false,
          zoom: 1.15,
          center: [105, 36],
          itemStyle: {
            // areaColor: '#000',
            borderWidth: 3,
            borderColor:'#ade8fb',
            shadowBlur: 2,
            shadowOffsetY: 5,
            shadowOffsetX: 0,
            shadowColor: "#036c89"
          },
          emphasis: {
            label: {
              show: false,
            }
          }
        },
        visualMap: {
          show: false,
          min: 0, // 最小值
          max: 100, // 最大值
          realtime: false,
          calculable: false,
          inRange: {
            color: ['#00ffed','red'],
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            label: {
              show: false
            },
            zoom: 1.15,
            center: [105, 36],
            emphasis: {
              label: {
                show: false,
                color: "#fff",
                fontWeight: 'bold'
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#112658',
                borderColor: '#4c6d9d',
                borderWidth: 1,
              },
              emphasis: {
                show: false,
                areaColor: '#112658',
              }
            },
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.mapData),
            symbol: 'circle',
            symbolSize: 8,
            hoverSymbolSize: 10,
            label: {
              formatter: '{b}:{@[2]}',
              position: "right",
              show: false,
              fontWeight: 'bold',
            },
            itemStyle: {
              color: "#00ffed",
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
        ]
      }
      let mapChart = echarts.init(document.getElementById("mapChart"))
      echarts.registerMap('china', china)
      // mapChart.clear()
      mapChart.setOption(mapData,true)
      mapChart.off('click')//先移除
      mapChart.on('click', (params) => {
          // console.log(params)
          let info = this.$store.state.user.permissions
          if(info.length > 1){
            let goods = info.indexOf('system:anti:goods')
            // console.log(goods)
            if(goods > -1){
              this.$router.push({ path:"/antiFake/good"})
            }else{
              this.$modal.msgError("暂无权限查看")
            }
          }else{
            this.$router.push({ path:"/antiFake/good"})
          }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        setTimeout(() => {
          mapChart.resize()
        }, 100)
      })
    },
    // 业务量
    getBusinessList(){
      businessList().then(res => {
        if(res.data){
          this.todaySOrder = res.data.todaySOrder
          this.toBeDelivered = res.data.toBeDelivered
          this.todayOrderCustomer = res.data.todayOrderCustomer
          this.dealerCount = res.data.dealerCount
        }
      })
    },
    // 经销商查询搜索
    // onTagDealer(index, val){
    //   this.current = index
    //   this.type(index)
    //   if(index == '1'){
    //     this.dealerTitleName = '销量'
    //   }else if(index == '2'){
    //     this.dealerTitleName = '累计库存'
    //   }else{
    //     this.dealerTitleName = '活跃度'
    //   }
    // },
    // 经销商数据
    getDealerData(){
      dealerList().then(res => {
        res.data.sort((a,b) => {
          return b.outStore - a.outStore
        })
        // console.log(res.data)
        this.dealerData = res.data
        if(res.data.length > 0){
          this.outStore = res.data[0].outStore
        }
      })
    },
  }
}
</script>

<style scoped>
.data-container{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url(../../../assets/images/data-bg.jpg) center/100%;
  background-size: cover;
  z-index:1;
}
.data-title{
  position:relative;
  height:50px;
  background:url(../../../assets/images/data-title.jpg) center/100%;
  background-size: cover;
  z-index:2;
}
.data-title p{
  display:flex;
  align-items:center;
  height:50px;
  padding-left:50px;
  color:#fff;
  font-size:24px;
  font-weight:bold;
}
.data-title:hover .fullscreen{
  display:block;
}
.fullscreen{
  display:none;
  position:absolute;
  top:50%;
  right:10px;
  margin-top:-18px;
  color:#fff;
  font-size:30px;
  cursor:pointer;
}
.data-cont{
  position:relative;
  display:flex;
  height: calc(100% - 50px);
}
.data-cont .data-item{
  width:30%;
  color:#fff;
}
.data-cont .data-width{
  width:40%!important;
}
.data-width .data-item-title{
  position:relative;
  display:flex;
  margin:0 auto;
  width:80%;
  height:43px;
  align-items:center;
  justify-content:center;
  background:url(../../../assets/images/data-item-title.png) no-repeat top -2px center/100%;
  background-size: cover;
  border-bottom:1px solid #00deff;
}
.data-width .data-item-title::before,.data-width .data-item-title::after{
  content: "";
  position: absolute;
  width: 30px;
  height: 100%;
  background:#03236f;
  z-index: 2;
}
.data-width .data-item-title::before{
  left:-8px;
  border-left: 1px solid #00deff;
  transform: skew(20deg);
}
.data-width .data-item-title::after{
  right:-8px;
  border-right: 1px solid #00deff;
  transform: skew(-20deg);
}
.data-item-title p{
  color:#fff;
  font-size:13px;
}
.data-item-title p b{
  padding:0 15px 0 5px;
}
.data-item-title p span{
  font-size:22px;
  font-weight:bold;
  padding:0 10px;
}
.color-num{
  color:#00ffed;
}
.color-warn{
  color:#fffc41;
}
.data-item-top{
  position:relative;
  overflow:hidden;
}
.data-item-num{
  position:relative;
  float:left;
  width:45%;
  margin:0 4% 4% 0;
  height:70px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.top-left-border{
  border-top:1px solid #00deff;
  border-left:1px solid #00deff;
}
.top-right-border{
  border-top:1px solid #00deff;
  border-right:1px solid #00deff;
}
.bottom-left-border{
  border-bottom:1px solid #00deff;
  border-left:1px solid #00deff;
}
.bottom-right-border{
  border-bottom:1px solid #00deff;
  border-right:1px solid #00deff;
}
.data-item-num::before,.data-item-num::after{
  content: "";
  position: absolute;
  background:#00deff;
}
.data-item-num::before{
  height:1px;
}
.data-item-num::after{
  width:1px;
}
.top-left-border::before{
  left:0;
  right:35px;
  bottom:0;
}
.top-left-border::after{
  right:0;
  top:0;
  bottom:35px;
}
.top-right-border::before{
  left:35px;
  right:0;
  bottom:0;
}
.top-right-border::after{
  left:0;
  top:0;
  bottom:35px;
}
.bottom-left-border::before{
  right:35px;
  left:0;
  top:0;
}
.bottom-left-border::after{
  right:0;
  top:35px;
  bottom:0;
}
.bottom-right-border::before{
  left:35px;
  right:0;
  top:0;
}
.bottom-right-border::after{
  left:0;
  top:35px;
  bottom:0;
}
.data-item-num p{
  font-size:12px;
  color:#fff;
  font-family: Microsoft YaHei;
  text-align: center;
}
.data-item-num p b,.data-item-num p span{
  color:#00ffed;
}
.data-item-num p b{
  font-size:22px;
  font-weight:bold;
}
.circle {
  position: absolute;
  width: 80px;
  height: 80px; 
  border-radius: 50%;
  border:1px solid #00deff;
  background:none;
}
.right-bottom{
  right: -45px;
  bottom: -45px;
}
.left-bottom{
  left: -45px;
  bottom: -45px;
}
.right-top{
  right: -45px;
  top: -45px;
}
.left-top{
  left: -45px;
  top: -45px;
}
.data-item-text{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:calc(-40px - 2%);
  margin-left:calc(-40px - 3.25%);
  border-radius: 100%;
  border:1px solid #00deff;
  width:80px;
  height:80px;
  background:url(../../../assets/images/circle.png) no-repeat bottom 3px right/90%;
  color:#00ffed;
  font-size:12px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}
.data-item-cont{
  position:relative;
  height:calc(100% - 170px);
  margin-right:6%;
}
.mt43{
  margin-top: 43px;
  height:calc(100% - 43px);
}
.data-item-container{
  position:relative;
  height:30%;
  padding:0 0 3% 5%;
}
.data-item-container:first-child{
  height:37%;
}
.data-item-container p{
  padding:3% 0;
  font-size:12px;
  color:#fff;
  font-weight:bold;
}
.data-item-container p span{
  padding-right:20px;
}
.data-item-cont-title{
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-item-cont-title::before{
  content: '';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:#00deff;
}
.data-item-cont-title h2{
  padding-left:10px;
  font-size:16px;
  color:#fff;
  font-weight:bold;
  font-family: Microsoft YaHei;
}
.data-item-cont-cont{
  position:relative;
  height:100%;
  margin-top:4%;
}
.data-item-cont-cont-tag .el-tag{
  border-radius:0;
  padding:2px 8px!important;
}
.data-item-cont-cont-tag .el-tag:first-child{
  border-radius:4px 0 0 4px;
  border-right:none;
}
.data-item-cont-cont-tag .el-tag:last-child{
  border-radius:0 4px 4px 0;
  border-left:none;
}
.data-item-cont-cont-tag .el-tag--plain.el-tag--info{
  background: none;
  border:1px solid #00deff;
  color: #fff;
  height:auto;
  line-height:normal;
  font-size:12px;
  cursor: pointer;
  padding:2px 8px;
}
.data-item-cont-cont-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color:#00ffed;
  font-size: 14px;
  font-weight: bold;
  height:35px;
  line-height:35px;
  padding:0 5px 0 15px;
  margin:4% 0;
  background:#00184c;
}
span.flex{
  flex: 0 0 60px;
  text-align: center;
}
.dealer-item{
  position:relative;
  margin-bottom:2%;
}
.dealer-item::before{
  position:absolute;
  top:0;
  left:0;
  width:18px;
  height:18px;
  line-height:18px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color:#fff;
  background:#abadb4;
  border-radius: 50%;
}
.dealer-item:nth-child(1):before{
  content: '1';
  background:#ff7e00;
}
.dealer-item:nth-child(2):before{
  content: '2';
  background:#ffcc02;
}
.dealer-item:nth-child(3):before{
  content: '3';
  background:#48eff0;
}
.dealer-item:nth-child(4):before{content: '4';}
.dealer-item:nth-child(5):before{content: '5';}
.dealer-item:nth-child(6):before{content: '6';}
.dealer-item:nth-child(7):before{content: '7';}
.dealer-item:nth-child(8):before{content: '8';}
.dealer-item:nth-child(9):before{content: '9';}
.dealer-item:nth-child(10):before{content: '10';}
.dealer-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color:#fff;
  font-size:12px;
  font-weight: bold;
  padding:0 5px 0 25px;
}
.dealer-item-bottom{
  position:relative;
  margin:2% 0 0 25px;
  background:#50576b;
  height:6px;
  border-radius: 3px;
}
.dealer-bgcolor{
  position:absolute;
  left:0;
  top:0;
  height:6px;
  border-radius: 3px;
  background:#abadb4;
}
.data-item-cont-cont-item{
  position: relative;
  overflow-y: auto;
  /* height: calc(100% - 120px); */
  height: calc(100% - 90px);
}
.data-item-cont-cont-item .dealer-item:nth-child(1) .dealer-bgcolor{
  background:#ff7e00;
}
.data-item-cont-cont-item .dealer-item:nth-child(2) .dealer-bgcolor{
  background:#ffcc02;
}
.data-item-cont-cont-item .dealer-item:nth-child(3) .dealer-bgcolor{
  background:#48eff0;
}

.el-tag--plain.el-tag--success{
  background: none;
  border-color: #00deff;
  color: #00deff;
  height:auto;
  line-height:normal;
  font-size:12px;
  cursor: pointer;
  padding:0 4px;
}
.el-tag--plain.el-tag--info{
  background:none;
  border:none;
  color:#fff;
  font-size:12px;
  padding:0 4px;
  cursor: pointer;
  height:auto;
  line-height:normal;
}
.echarts-item{
  width:100%;
  height:calc(100% - 36px);
}
.echarts-item.yield,.echarts-item.stock{
  width:100%;
  height:calc(100% - 19px);
}
.echarts-item.map{
  position:relative;
  width:100%;
  height:calc(100% - 43px);
}
</style>